<script setup>
import breadCrumbPage from '@/components/breadCrumbPage.vue';
import { ref } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';

const breadMessage = ['首页', '列表页', '卡片列表']

const activeKey = ref('1')
</script>
<template>
  <breadCrumbPage :breadMessage></breadCrumbPage>
  <div class="cardPage">
    <a-tabs v-model:activeKey="activeKey" size="large" style="height: 100%;">
      <a-tab-pane key="1" tab="快速开始">
        <div class="fastStart">
          <a-row :gutter="[24, 20]">

            <a-col :span="8">
              <a-upload-dragger>
                <div>
                  <PlusOutlined />
                  <span>新增产品</span>
                </div>
              </a-upload-dragger>
            </a-col>


            <a-col :span="8" v-for="item in 11" :key="item">
              <a-card class="card" hoverable>
                <a-card-meta>
                  <template #avatar>
                    <a-avatar src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png" size="large" />
                  </template>
                  <template #description>
                    <h3 href="#"><strong>Alipay</strong></h3>
                    <p style="margin-bottom: 0px;">在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。</p>
                  </template>
                </a-card-meta>
                <div class="cardBottom">
                  <div>操作一</div>
                  <a-divider type="vertical" style="width: 2%;" />
                  <div>操作二</div>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="产品简介" force-render>Content of Tab Pane 2</a-tab-pane>
      <a-tab-pane key="3" tab="产品文档">Content of Tab Pane 3</a-tab-pane>
    </a-tabs>
  </div>
</template>

<style lang="less" scoped>
.cardPage {
  background-color: #fff;
  font-size: 16px;
  // height: 100%;

  :deep(.ant-tabs-nav) {
    margin-bottom: 0px;
    padding: 0px 20px;
  }

  :deep(.ant-tabs-content) {
    height: 100%;

    // 大卡片盒子
    .fastStart {
      background-color: rgb(240, 242, 245);
      padding: 20px;
      height: 100%;

      // 上传
      .ant-upload-wrapper {
        height: 200px;
        max-width: 520px;

        .ant-upload {

          background-color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;

          &:hover {
            color: rgb(64, 169, 255);
          }
        }

      }

      //每张小卡片
      .card {
        height: 200px;
        max-width: 520px;
        background-color: #fff;
        overflow: hidden;
        position: relative;

        .ant-card-body {
          padding: 24px;
        }

        h3 {
          margin-bottom: 5px;
        }

        .cardBottom {
          display: flex;
          // justify-content: space-between;
          align-items: center;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: rgb(250, 250, 250);
          height: 25%;
          color: rgb(137, 137, 137);

          div {
            text-align: center;
            width: 50%;

            &:hover {
              color: skyblue;
            }
          }
        }
      }
    }
  }

}
</style>
